<template>
  <div>
    <div class="topContent">
      <div class="topTitle">
        <span>业务名称：</span>
        <span style="margin-left: 5px;font-size: 20px">{{ serviceTypeName }}</span>
      </div>
      <div class="reConText">
        <div class="registerContent">
          <span class="regisLeft">营业厅：</span>
          <span class="regisRight">{{ fullname }}</span>
        </div>
        <div class="registerContent">
          <span class="regisLeft">预约时间：</span>
          <span class="regisRight"> {{ reserveDate }} {{ intervalBeginTime }}-{{ intervalEndTime }} </span>
        </div>
        <div class="registerContent">
          <span class="regisLeft">取票时间：</span>
          <span class="regisRight">{{ getTicketTime }}</span>
        </div>
      </div>
    </div>
    <div class="tipsTextSure">
      <span style="color:#FFAE00;">
        <img src="~@/assets/images/regtips.png" style="width: 12px;vertical-align: middle" alt="" />
        温馨提示
      </span>
      <div style="margin: 8px 0;line-height: 16px;">取票时间为预约时间前后20分钟；</div>
      <div style="margin: 6px 0;line-height: 16px;">
        若您在当月内5次预约不取消、不临柜，您在当月将被限制再次预约。
      </div>
    </div>
    <div class="sureButton">
      <button @click="submitInfo()" class="sureBut">
        确认预约
      </button>
      <van-popup
        v-model="sureShow"
        :style="{ width: '75%', background: 'rgb(0,0,0,0)' }"
        :close-on-click-overlay="false"
      >
        <div class="sureShowBg">
          <div style="margin-top:64px">
            您已成功预约<span class="colorE57700">{{address}}</span>的业务服务~
          </div>
          <div style="padding: 8px 0;">
            <div>预约码：</div>
            <div class="sureAlert">{{ id }}</div>
          </div>
          <div style="padding: 8px 0;">
            <div>预约时间</div>
            <div class="sureAlert">{{ reserveDate }} {{ intervalBeginTime }}-{{ intervalEndTime }}</div>
          </div>
          <img @click="toListPage()" class="sureKnow" src="~@/assets/images/regKnow.png" alt="" />
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import 'vant/lib/popup/style';
import 'vant/lib/dialog/style';
import { Toast, Popup, Dialog } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Dialog);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { Header },
})
export default class RegisterSure extends Vue {
  departId: any = ''; // 网点部门id
  customerName: any = ''; // 客户姓名
  customerPhone: any = ''; // 客户手机号
  serviceType: any = ''; //预约业务类别
  serviceTypeName: any = ''; //预约业务类别
  intervalSeriNo: any = ''; // 预约区间序号
  reserveDate: any = ''; //预约日期
  intervalBeginTime: any = ''; //预约时间
  intervalEndTime: any = ''; //预约时间
  address: any = '';
  fullname: any = '';
  idCard: any = '';
  idType: any = '';
  openId: any = '';
  // customerCode: '', //客户代码
  // vipLevel: '', //客户vip等级
  sureShow: any = false; // 弹出框
  reserveCode: any = ''; // 预约码
  id: any= '';// 预约码
  latitude:any = '';
  longitude:any = '';
  mounted() {
    this.departId = this.$route.query.departId; // 网点部门id
    this.customerName = this.$route.query.customerName; // 客户姓名
    this.customerPhone = this.$route.query.customerPhone; // 客户手机号
    this.serviceType = this.$route.query.serviceType; //预约业务类别
    this.intervalSeriNo = this.$route.query.intervalSeriNo; // 预约区间序号
    this.reserveDate = this.$route.query.reserveDate; //预约日期
    this.intervalBeginTime = this.$route.query.intervalBeginTime; //预约时间
    this.intervalEndTime = this.$route.query.intervalEndTime; //预约时间
    this.address = this.$route.query.address;
    this.fullname = this.$route.query.fullname;
    this.openId = this.$route.query.openId;
    this.longitude = this.$route.query.longitude; 
    this.latitude= this.$route.query.latitude;
    if(this.$route.query.serviceType == '01'){
      this.serviceTypeName = '承保';
    } else if(this.$route.query.serviceType == '02'){
      this.serviceTypeName = '理赔';
    }
    this.isOneLoad();
  }
  get getTicketTime() {
    if (!this.reserveDate && !this.intervalBeginTime && !this.intervalEndTime) {
      return '';
    }
    var reserveDateArr = this.reserveDate.split('-');
    var year = reserveDateArr[0];
    var month = reserveDateArr[1];
    var day = reserveDateArr[2];
    var beginHour = this.intervalBeginTime.split(':')[0];
    var beginMinute = this.intervalBeginTime.split(':')[1];
    var endHour = this.intervalEndTime.split(':')[0];
    var endMinute = this.intervalEndTime.split(':')[1];
    var beginTicket = new Date(year, month - 1, day, beginHour, beginMinute - 20);
    var endTicket = new Date(year, month - 1, day, endHour, endMinute - -20);
    return (
      beginTicket.getHours() +
      ':' +
      beginTicket.getMinutes() +
      '-' +
      endTicket.getHours() +
      ':' +
      endTicket.getMinutes()
    );
  }
  isOneLoad() {
    var _this = this;
    cloudApi
      .isOneLoad({
        openId: _this.openId,
      })
      .then(function(res) {
        if (res.data.code !== '9999') {
          //是第一次进入
          _this.idCard = res.data.idCard;
          _this.idType = res.data.idType;
        }
      });
  }
  submitInfo() {
    var _this = this;
    cloudApi
      .collectCustomerInformation({
        departId: _this.departId,
        customerName: _this.customerName,
        customerPhone: _this.customerPhone,
        serviceType: _this.serviceType,
        intervalSeriNo: _this.intervalSeriNo,
        reserveDate: _this.reserveDate,
        intervalBeginTime: _this.intervalBeginTime,
        intervalEndTime: _this.intervalEndTime,
        idCard: _this.idCard,
        idType: _this.idType,
        openId: _this.openId,
        address: _this.address,
        // customerCode: _this.customerCode,
        // vipLevel: _this.vipLevel
      })
      .then(function(res: any) {
        if(res.data){
          if(res.data.code == '1111'){
            Dialog.alert({
              title: '温馨提示',
              message: '您已存在当日预约信息，请到“我的预约”查看',
              confirmButtonColor: '#009B63',
            });
          } else {
            _this.sureShow = true;
            _this.reserveCode = res.data.reserveCode;
            _this.id = res.data.id
            _this.sendServiceMessage();
          }
        }
        // _this.reserveDate = res.data.date;
      });
  }
  toListPage() {
    this.sureShow = false;
    this.$router.push({
      path: '/myAppoint',
      query:{
        longitude: this.longitude,
        latitude: this.latitude,
      }
    });
  }
  //发送消息模板
  sendServiceMessage(){
    var _this = this;
    cloudApi
      .sendServiceMessage({
        "openid": sessionStorage.getItem('miniopenid'),
        "departName": _this.fullname,
        "reserveCode": _this.id,
        "reserveDate": _this.reserveDate + ' ' + _this.intervalBeginTime,
        "reserveType": _this.$route.query.serviceType,
      })
      .then(function(res: any) {
        if(res.data){}
        // _this.reserveDate = res.data.date;
      });
  }
}
</script>
<style lang="less" scoped></style>
